<template>
	<view class="content">

		<view class="form">
			<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
			<u--form>
				<u-form-item label="姓名" prop="name" borderBottom ref="item1">
					<u--input v-model="name" border="none"></u--input>
				</u-form-item>
				<u-form-item> <u-button type="primary" icon="plus-circle-fill" text="新增时间" @click="add"></u-button>
				</u-form-item>

				<u-form-item :label="(index+1)+'.'" v-for="(item,index) in timeList" :key="index"
					style="border-bottom: 1px solid #eaebec;margin-bottom: 15px;width: 100%;"  @click="timeSelect(index)">

					<view  style="width: 100%;display: flex;">
						<view>
							<u--input v-model="item.startTime" border="none" placeholder="请选择时间" readonly></u--input>
						</view>
						<view>
							<u--input v-model="item.endTime" border="none" readonly></u--input>
						</view>
					</view>
				</u-form-item>


				<u-form-item> <u-button type="primary" text="生成" v-show="timeList.length" @click="submit"></u-button>
				</u-form-item>


			</u--form>

		</view>


		<u-datetime-picker :show="timeShow" mode="datetime" @cancel="timeShow = false"  v-model="defaultDate"
			@confirm='confirmTime'  ></u-datetime-picker>
	</view>
</template>

<script>
	import dayjs from "dayjs"

	export default {
		data() {
			return {
				timeShow: false,
				title: 'Hello',
				name: "",
				timeList: [],
				currentIndex: null,
				 defaultDate: ''
			}
		},
		onLoad() {
				this.defaultDate = dayjs().format('YYYY-MM-DD')
		},
		methods: {
			timeSelect(index) {
				this.currentIndex = index;
				this.timeShow = true;
			},
			confirmTime(val) {
				let date = dayjs(val.value).format(`YYYY-MM-DD HH:mm:${this.randomsecond()}`);
				let afterDate = dayjs(val.value).add(9, 'hour').format(
					`YYYY-MM-DD HH:${this.randomsecond()}:${this.randomsecond()}`);
				this.$set(this.timeList, this.currentIndex, {
					...this.timeList[this.currentIndex],
					startTime: date,
					endTime: afterDate
				});
				this.timeShow = false;
			},
			add() {
				let obj = {
					startTime: "",
					endTime: ""
				};
				this.timeList.push(obj);
			},
			randomsecond() {
				let second = Math.floor(Math.random() * 60);
				if (second.toString().length == 1) {
					return '0' + second
				} else {
					return second
				}
			},
			submit() {
				let obj = {
					name:this.name,
					time:this.timeList
				}
				uni.navigateTo({
					url:`/pages/result/index?params=${JSON.stringify(obj)}`
				})
				
			}

			// 
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 20px;
	}

	.u-form {
		width: 100%;
	}

	.form {
		width: 100%;
	}
</style>